@charset "utf-8";
/* ============================================================
 * 檔案:abouts.css
 * 用途:關於蘿拉(abouts.php)
 * ------------------------------------------------------------
 * 【常見小修改速查】
 *   字體大小  → 搜尋  font-size      (例 font-size: 16px;)
 *   字型      → 搜尋  font-family    (全站預設字型設定在 public.css)
 *   文字顏色  → 搜尋  color
 *   背景顏色  → 搜尋  background  或  background-color
 *   外距(元素之間) → 搜尋  margin
 *   內距(框內留白) → 搜尋  padding
 *   粗體      → font-weight: bold;   置中 → text-align: center;
 * ============================================================ */


#space{
    width: 100%;
    height: calc(100% - 200px);
}
        
#about_title_01{
    width:600px;
    font-size: 29px;
    font-weight: 500;
    text-align: left;
    margin: 0 auto;
    margin-bottom: 60px;
}
#about_txt_01{
    width:600px;
    font-size: 15px;
    line-height: 28px;
    text-align: left;
    margin: 0 auto;
}
#about_02{
    height: auto;
     background:#CFC1AE;
}
#about_02:after{
    clear : right;
    content : '.';
    display : block;
    height : 0;
    overflow : hidden;
}
#about_04{
    height: auto;
    background: #F9F4EA;

}
#about_04:after{
    clear : right;
    content : '.';
    display : block;
    height : 0;
    overflow : hidden;
}
#about_03{
    width:100%;

    padding-top: 100px;
    background: url(/images/about/about_03_bg.png) no-repeat center center;
}
#about_left_03{      

    text-align: left;
    padding-bottom: 50px;
}
#about_left_03 img{
    width:100%;
}
#about_right_03{
    padding-left: 40px;
    padding-top: 20px;
    letter-spacing: 2px;        
}
#about_txt1_03{
    font-size: 29px;
    font-weight: 400px;
    margin-bottom: 40px;
}
#about_txt2_03{
    width:450px;
    line-height: 25px;
    font-size: 15px;
}
#about_05{
    width:100%;     
    background: #D3C3B0;
    padding-top: 100px;
    padding-bottom: 100px;
    letter-spacing: 2px;
}
#about_05:after{
    clear : right;
    content : '.';
    display : block;
    height : 0;
    overflow : hidden;
}
#about_title_05{
    width:450px;
    height: 180px;
    margin: 0 auto;
    text-align: center;
    color:#FFFFFF;
}
#about_txt1_05{
    font-size: 29px;  
    font-weight: bolder;
    margin-bottom: 20px;
}
#about_txt2_05{
    font-size: 14px;

}
.about_05_img{
    padding: 20px;
}
.about_05_img img{
    width: 100%;
}

@media screen and (min-width:1200px){
    #about_left_02, #about_left_04{
        width:50%;           
        float:left;
        background:#CFC1AE;
        padding-top: 100px;
        letter-spacing: 2px;
    }
    #about_right_02, #about_right_04{
        width:50%;          
        float: right;
    }
    #about_right_02 img, #about_right_04 img{
        width: 100%;
    }
    #about_txt_title_02, #about_txt_title_04{
        font-size: 28px;
        font-weight: 400;
        width: 500px;
        margin: 0 auto;
        text-align: left;
    }
    #about_txt1_02, #about_txt1_04{
        width:500px;
        line-height: 30px;
        padding-top: 30px;
        font-size: 15px;
        text-align: left;
        margin: 0 auto;
    }
    #about_txt2_02{
        width: 500px;
        padding-top: 30px;
        margin: 0 auto;
        color: #ffffff;
    }
     #about_left_04{
         padding-top: 200px;
         background:#F9F4EA;
    }
}
@media screen and (max-width:1200px) and (min-width:992px){
    #about_left_02,#about_left_04{
        width:100%;        
        background:#CFC1AE;
        padding-top: 100px;
        letter-spacing: 2px;
        padding-bottom: 50px;
    }
    #about_right_02,#about_right_04{
        width:100%;          

    }
    #about_right_02 img, #about_right_04 img{
        width: 100%;
    }
    #about_txt_title_02,  #about_txt_title_04{
        font-size: 28px;
        font-weight: 400;
        width: 500px;
        margin: 0 auto;
        text-align: left;
    }
    #about_txt1_02, #about_txt1_04{
        width:500px;
        line-height: 30px;
        padding-top: 30px;
        font-size: 15px;
        text-align: left;
        margin: 0 auto;
    }
    #about_txt2_02{
        width: 500px;
        padding-top: 30px;
        margin: 0 auto;
        color: #ffffff;
    }
    #about_03{
        height: 650px;
    }
    #about_03_txt{
        width: 100%;
        height: 20px;
        text-align: center;
        font-size: 15px;
        letter-spacing: 2px;
    }  
    #about_left_04{
        background: #F9F4EA;
    }
    #about_04{padding-bottom: 30px;}
    #about_05{
        height: 750px;
    }
}

@media screen and (min-width:992px){
     article{
        width: calc(100% - 150px);    
        margin-left: 150px;

    }
    .show_mobile{
        display: none;
    }
    #banner{
        width:calc(100% - 150px);
        margin-left: 150px;
        position:absolute;  
        height: 100%;
        overflow: hidden;
        margin-top: -200px;  
    }

    #banner_title{
        width: 300px;
        height: 100px;
        position: absolute;          
        z-index: 1000;
        color: #fff;
        left: 50%;
        margin-left: -50px;
        top:40%;
        letter-spacing: 2px;
        text-align: center;
    }
    #banner_txt1{
        font-size: 45px;
    }
    #banner_txt2{
        font-family: 'Rasa', serif;
        font-size: 16px;
    }
    #about_01{
        background: url(/images/about/about_01_bg1.png) no-repeat  1420px 0px;
    }
    #about_form_01{
        padding-top: 160px;
        height: 768px;
        letter-spacing: 2px;
        background:url(/images/about/about_01_bg.png) no-repeat left;
    }
}
@media screen and (max-width:992px){
    article{
        width:100%;          

    }
    .show_pc{
        display: none;
    }
    #space{
        display: none;
    }
    .mobile_display{
        display: none;
    }
    #banner{
        width:100%;    
        position: relative;  
        height: 100%;
        overflow: hidden;
        margin-top: -200px;
    }
    #banner_title{
        padding-top: 50%;
        width: 100%;
        position: absolute;

        z-index: 1000;
        color: #fff;     

        letter-spacing: 2px;
        text-align: center;
    }
    #banner_txt1{
        font-size: 25px;
    }
    #banner_txt2{
        font-family: 'Rasa', serif;
        font-size: 16px;
    }

        
    #about_01{
        padding-top: 50px;
        padding: 30px;
    }
    #about_title_01, #about_txt_01,#about_right_02{
        width:100%;
    }
    #about_txt_01{
        color:#717071;
    }
    #about_right_02 img{
        width: 100%;
    }
    #about_left_02,#about_left_04{
        width:100%;        
        background:#CFC1AE;
        padding: 50px 40px 50px 40px;    
        letter-spacing: 2px;      
    }
    #about_right_02,#about_right_04{
        width:100%;          

    }
    #about_right_02 img, #about_right_04 img{
        width: 100%;
    }
    #about_txt_title_02,  #about_txt_title_04{
        font-size: 24px;
        font-weight: bolder;
        width: 100%;
        margin: 0 auto;
        text-align: left;
    }
    #about_txt1_02, #about_txt1_04{
        width: 100%;
        line-height: 30px;
        padding-top: 30px;
        font-size: 15px;
        text-align: left;
        margin: 0 auto;
    }
    #about_txt2_02{
        display: none;
    }

    #about_left_04{
        background: #F9F4EA;
    }

    #about_03{
        width:100%;
        padding-top: 50px;
        padding-bottom: 50px;

    }
    #about_left_03{
        padding: 30px;
        text-align: left;
    }
    #about_left_03 img{
        width:100%;
    }
    #about_right_03{

        letter-spacing: 2px;
    }
    #about_txt1_03{
        font-size: 29px;
        font-weight: 400px;
        margin-bottom: 40px;
    }
    #about_txt2_03{
        width:100%;
        line-height: 25px;
        font-size: 15px;
    }     
    #about_04{padding-bottom: 30px;}
    #about_05{

    }
    .show_mobile{
        width: 100%;
        text-align: center;
        padding-top: 50px;
    }
    .show_mobile img{
        margin-bottom: 50px;
    }
    
    #about_title_05{
        width:100%;
        padding: 0 30px 0 30px;
        margin: 0 auto;
        text-align: center;
        color:#FFFFFF;
    }
    .about_05_img{
        padding: 40px;
    }
    #about_txt2_05{
        font-size: 18px;

    }
    #footer{
        border-top: 0px solid #9FA0A0;
    }
}